<template>
  <ChartHeader
    title="各学校预警干预情况"
    :go-to-detail="goToDetail"
  ></ChartHeader>
  <v-chart class="chart" :option="option" />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import {
  ref,
  defineEmits,
  defineProps,
  reactive,
  toRefs,
  watchEffect,
} from 'vue'
import { useVModel } from '@vueuse/core'
import { useDatePicker } from '/@/use/datePicker'
import { useBack } from '/@/use/useRouteBack'
import { useEarlyWarningInterventionAllSchool } from '../use/useEarlyWarningInterventionAllSchool'
import { NumData, TotalData } from '../types'
import { useRouter } from 'vue-router'
import ChartHeader from './ChartHeader.vue'
import VChart from 'vue-echarts'

const props = defineProps<{
  numData: NumData | null
  totalData: TotalData | null
}>()

const router = useRouter()

function goToDetail() {
  router.push({ name: 'TodoDetail', query: { activeNames: 'warn' } })
}

const { option } = useOptions()

function useOptions() {
  const { numData } = toRefs(props)
  const interveneXAxisData = ['预警总人数', '已干预人数', '未干预人数']

  const colorList: string[] = []

  const { gradeyAxisData, numList, noNumList, totalList } =
    useEarlyWarningInterventionAllSchool({
      numData,
    })

  const option = reactive({})

  watchEffect(() => {
    Object.assign(option, {
      title: {
        // text: title,
        textStyle: {
          color: '#0986b3',
        },
      },
      grid: {
        top: 40,
        bottom: '15%',
        height: 140,
      },
      xAxis: {
        type: 'category',
        data: gradeyAxisData.value,
        axisLabel: {
          show: true,
          interval: 0,
          rotate: 40,
          textStyle: {
            // color: "white",
          },
        },
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            // color: "white",
          },
        },
      },
      series: [
        {
          data: noNumList.value,
          type: 'bar',
          stack: 'total',
          barMaxWidth: 20,
          itemStyle: {
            normal: {
              color: '#DDAA00',
              label: {
                show: true, //开启显示
                position: 'inside', //在上方显示
                textStyle: {
                  //数值样式
                  // color: "white",
                  fontSize: 12,
                },
              },
            },
          },
        },
        {
          data: numList.value,
          type: 'bar',
          barMaxWidth: 20,
          stack: 'total',
          itemStyle: {
            normal: {
              color: '#BBFF66',
              borderRadius: [5, 5, 0, 0],
              label: {
                show: true, //开启显示
                position: 'inside', //在上方显示
                textStyle: {
                  //数值样式
                  // color: "white",
                  fontSize: 12,
                },
              },
            },
          },
        },
      ],
    })
  })
  return {
    option,
  }
}
</script>

<style scoped lang="less">
@import url('./board-common.less');

.chart {
  height: 280px;
}
</style>
